<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="1000px" append-to-body>
      <el-row :gutter="10">
          <el-col :md="8" :sm="24">
              <el-card shadow="hover" class="text-large chart-card">
                  <div class="chart-card-header" slot="header">报表核对 - 订单详情</div>
                  <div class="chart-card-content">
                      <div class="content-title" v-for="(item, index) in preparationWork" :key="index">
                        <i :class="item.status == 1 ? 'el-icon-check text-primary content-icon' : 'el-icon-close text-error content-icon'"></i>
                        <span>{{ item.msg }}</span> 
                      </div>
                  </div>
              </el-card>
          </el-col>
          <el-col :md="8" :sm="24">
              <el-card shadow="hover" class="text-large chart-card">
                  <div class="chart-card-header" slot="header">报表核对 - 物流详情</div>
                  <div class="chart-card-content">
                      <div class="content-title" v-for="(item, index) in logisticsBill" :key="index">
                        <i :class="item.status == 1 ? 'el-icon-check text-primary content-icon' : 'el-icon-close text-error content-icon'"></i>
                        <span>{{ item.msg }}</span> 
                      </div>
                  </div>
              </el-card>
          </el-col>
          <el-col :md="8" :sm="24">
              <el-card shadow="hover" class="text-large chart-card">
                  <div class="chart-card-header" slot="header">报表核对 - 采购成本详情</div>
                  <div class="chart-card-content">
                      <div class="content-title" v-for="(item, index) in procurementBill" :key="index">
                        <i :class="item.status == 1 ? 'el-icon-check text-primary content-icon' : 'el-icon-close text-error content-icon'"></i>
                        <span>{{ item.msg }}</span> 
                      </div>
                  </div>
              </el-card>
          </el-col>
          <el-col :md="12" :sm="24">
              <el-card shadow="hover" class="text-large chart-card">
                  <div class="chart-card-header" slot="header">报表核对 - 争议成本详情</div>
                  <div class="chart-card-content">
                      <div class="content-title" v-for="(item, index) in disputeCost" :key="index">
                        <i :class="item.status == 1 ? 'el-icon-check text-primary content-icon' : 'el-icon-close text-error content-icon'"></i>
                        <span>{{ item.msg }}</span> 
                      </div>
                  </div>
              </el-card>
          </el-col>
          <el-col :md="12" :sm="24">
              <el-card shadow="hover" class="text-large chart-card">
                  <div class="chart-card-header" slot="header">报表核对 - 匹配标签详情</div>
                  <div class="chart-card-content">
                      <div class="content-title flex" v-for="(item, index) in orderTagMatching" :key="index">
                        <!-- <i :class="item.status == 1 ? 'el-icon-check text-primary content-icon' : 'el-icon-close text-error content-icon'"></i>
                        <span>{{ item.msg }}</span>  -->
                        <div style="width: 50%">渠道: {{ item.tag_source }}</div>
                        <div>运营: {{ item.tag_campaign }}</div>
                      </div>
                  </div>
              </el-card>
          </el-col>
      </el-row>
  </el-dialog>
</template>

<script>
import { queryPreparationWork, queryLogisticsBill, queryProcurementBill, queryDisputeCost, queryOrderTagMatching } from '@/api/shop'
export default {
  name: 'AdminCheckDialog',
  props: {
      value: {
          type: Boolean,
          default: false,
          required: true,
      },
      params: {
          type: Object,
          default: () => {},
      },
  },
  data() {
      return {
          loading: false,
          preparationWork: {},
          logisticsBill: {},
          procurementBill: {},
          disputeCost: {},
          orderTagMatching: {}
      }
  },
  computed: {
      title() {
          return `报表核对`
      },
      dialogVisible: {
          get() {
              return this.value
          },
          set(val) {
              this.$emit('input', val)
          },
      },
  },
  watch: {
      params: {
          handler(val) {
              if (val.id) {
                  this.model = Object.assign({}, this.model, val)
              }
          },
          immediate: true,
          deep: true,
      },
  },
  async created() {
    this.loading = true
    try {
      const params = {}
      const [preparationWork, logisticsBill, procurementBill, disputeCost, orderTagMatching] = await Promise.all([queryPreparationWork(params),queryLogisticsBill(params), queryProcurementBill(params), queryDisputeCost(params), queryOrderTagMatching(params) ])
      this.preparationWork = preparationWork?.data ?? []
      this.logisticsBill = logisticsBill?.data ?? []
      this.procurementBill = procurementBill?.data ?? []
      this.disputeCost = disputeCost?.data ?? []
      this.orderTagMatching = orderTagMatching?.data ?? []
    } catch (error) {
      
    }
    this.loading = false
      
  },
  methods: {
      submit() {
          this.$refs.form.validate(valid => {
              if (!valid) {
                  return
              }

              const params = { ...this.model }
              if (this.save) {
                  return
              }
              this.save = true
              editShop(params)
                  .then(res => {
                      this.$message.success(res.msg)
                      this.dialogVisible = false
                      this.$emit('success')
                  })
                  .finally(() => {
                      this.save = false
                  })
          })
      },
      cancel() {
          this.dialogVisible = false
      },
  },
}
</script>

<style lang="scss" scoped>
    /* 统计卡片 */
    .chart-card {
        color: #606266;
        margin-bottom: 15px;
    }
    .chart-card-num {
        font-size: 30px;
    }

    .chart-card-content {
        min-height: 50px;
        margin-bottom: 15px;
        .chart-card-header {
            font-weight: bold;
            font-size: 20px;
            color: #303133;
        }
        .content-title {
            font-size: 14px;
            color: #303133;

            .content-icon {
                margin-right: 5px;
            }
            .text-primary {
              color: #11a983;
            }
            .text-error {
              color: #ff4949;
            }
        }
    }
</style>
